<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="formInline.status" style="width:100px">
            <el-option
              v-for="item in status_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable v-model="store_id" style="width:300px">
            <el-option
              v-for="item in store_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="type" style="width:100px">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            style="width:300px"
            v-model="formInline.order_id"
            placeholder="请输入完整退货单号或单号末尾数字"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
        <el-form-item class="pull-right">
            <router-link :to="{name:'warehouse/rtODetail',params :{routerflag:1}}"> 
              <el-button type="primary" size="small">新建退货单</el-button>
            </router-link>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退货单号" prop="order_id" width="200"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="create_time" width="200"></el-table-column>
        <el-table-column align="center" label="退货方" prop="return_name"></el-table-column>
        <el-table-column align="center" label="退货渠道" width="100" prop="type_name"></el-table-column>
        <el-table-column align="center" label="收货方" prop="receive_name"></el-table-column>
        <el-table-column align="center" label="退货种类" prop="species_num" width="100"></el-table-column>
        <el-table-column align="center" label="退货数量" prop="all_num" width="100"></el-table-column>
        <el-table-column align="center" label="退货金额" width="100" prop="all_money"></el-table-column>
        <el-table-column align="center" label="约定退款金额" width="100" prop="appoint_money"></el-table-column>
        <el-table-column align="center" label="退货状态" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.status|rOrderStatus(1)}}</span>
          </template>          
        </el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope"> 
            <router-link
              v-show="scope.row.status==30"
              :to="{name:'warehouse/rtODetail',params :{id:scope.row.id,store_id:scope.row.store_id,routerflag:2}}"
            >
              <el-button type="primary" plain size="mini">修改</el-button>
            </router-link>
            <router-link
              v-show="scope.row.status!=30" 
              :to="{name:'warehouse/rtOInfo',params :{id:scope.row.id,routerflag:3}}"
            > 
              <el-button type="primary" plain size="mini">详情</el-button>
            </router-link>
           
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getStore, getList, getPage } from "@/api/warehouse/returnOList";
export default {
  data() {
    return {
      listLoading: false,
      all_store_id: "",
      status_list: [
        { id: "30", name: "被打回" },
        { id: "10", name: "待审批" },
        { id: "20", name: "审批通过" },
        { id: "50", name: "待收货" },
        { id: "60", name: "部分收货" },
        { id: "70", name: "收货完成" },
        { id: "40", name: "已关闭" }
      ],
      store_list: [],
      type_list: [
        { id: "0", name: "全部" },
        { id: "1", name: "向供应商" },
        { id: "2", name: "向中央仓" }
      ],
      store_id: "",
      type: "0",
      formInline: {
        status: "30",
        store_id: "",
        house_id: "",
        order_id: "",
        type: "0"
      },
      list: null,
      totalDataNumber: 1,
      currentPage: 1,
      saveForm: {
        order_id: "",
        order_list: []
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.list||vm.$route.params.routerflag == 1) {
        vm.getStoreList();
      }
    });
  },
  methods: {
    getStoreList() {
      this.listLoading = true;
      getStore({ look_del: 0, category_id: 564 }).then(res => {
        res.forEach(val => {
          this.all_store_id += val.id + ",";
        });
        this.all_store_id = this.all_store_id.substr(
          0,
          this.all_store_id.length - 1
        );
        if (res.length > 1) {
          res.unshift({ id: -1, name: "全部" });
        }
        this.store_list = res;
        this.store_id = this.store_list[0].id;
        this.searchClick();
      });
    },
    searchClick() {
      this.fetchData();
    },
    getData(data){
      data.forEach(val=>{
        val.type_name=val.type==1?"退供应商":"退中央仓";
        val.appoint_money=val.appoint_money?(val.appoint_money/1).toFixed(2):'';
        val.all_money=(val.all_money*1).toFixed(2);
      })
      this.list = data;      
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.list = [];
      if (this.formInline.order_id) {
        this.store_id = this.store_list[0].id;
      }
      if (this.store_id == -1||this.formInline.order_id) {
        this.formInline.store_id = this.all_store_id;
      } else {
        this.formInline.store_id = this.store_id;
      }
      this.formInline.type=this.type;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.data.page * 20;
          getList(this.formInline).then(res => {
            if (res.code == 1) {
              this.getData(res.data);
              // res.data.forEach(val=>{
              //   val.type_name=val.type==1?"退供应商":"退中央仓";
              //   val.appoint_money=val.appoint_money?(val.appoint_money/1).toFixed(2):'';
              //   val.all_money=(val.all_money*1).toFixed(2);
              // })
              // this.list = res.data;
            }
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline, val).then(res => {
        this.getData(res.data);
        // res.data.forEach(val=>{
        //   val.type_name=val.type==1?"退供应商":"退中央仓";
        //   val.all_money=(val.all_money*1).toFixed(2);
        // })
        // this.list = res.data;
        this.listLoading = false;
      });
    }
  }
};
</script>